<template>
  <el-dialog :title="title" :model-value="visible" width="800px" :before-close="closeForm">
    <el-form ref="empPwd" :model="empPwd" :rules="rules" label-width="120px">
      <el-form-item label="登陆名" prop="LoginName">
        <el-input v-model="empPwd.LoginName" :readonly="true" placeholder="登陆名" />
      </el-form-item>
      <el-form-item label="旧密码" prop="Password">
        <el-input
          v-model="empPwd.Password"
          type="password"
          maxlength="30"
          placeholder="旧密码"
          show-password
        />
      </el-form-item>
      <el-form-item label="新密码" prop="NewPwd">
        <el-input
          v-model="empPwd.NewPwd"
          type="password"
          maxlength="30"
          placeholder="新密码"
          show-password
        />
      </el-form-item>
      <el-form-item label="重复密码" prop="RepeatPwd">
        <el-input
          v-model="empPwd.RepeatPwd"
          type="password"
          maxlength="30"
          placeholder="重复密码"
          show-password
        />
      </el-form-item>
      <el-form-item label="验证码" prop="VerCode">
        <el-row>
          <el-col :span="10">
            <el-input
              v-model="empPwd.VerCode"
              style="width: 100%"
              :clearable="true"
              placeholder="验证码"
            />
          </el-col>
          <el-col :span="10">
            <img
              style="width: 130px; margin-left: 10px"
              :src="verSrc"
              @load="codeLoad"
              @click="refresVerCode"
            />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { resetUserPwd, GetVerCodeSrc } from '@/api/emp/loginUser'

export default {
  components: {},
  props: {
    loginName: {
      type: String,
      default: null
    },
    title: {
      type: String,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const checkPwd = (rule, value, callback) => {
      if (value == null) {
        callback()
      } else if (value !== this.empPwd.NewPwd) {
        callback(new Error('两次密码需输入一致!'))
      } else {
        callback()
      }
    }
    return {
      empPwd: {
        RepeatPwd: null,
        NewPwd: null,
        Password: null,
        VerCode: null
      },
      verSrc: null,
      isLoadCode: false,
      rules: {
        Password: [
          {
            required: true,
            message: '原密码不能为空！',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 30,
            message: '密码长度需在6-30位之间！',
            trigger: 'blur'
          }
        ],
        NewPwd: [
          {
            required: true,
            message: '密码不能为空！',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 30,
            message: '密码长度需在6-30位之间！',
            trigger: 'blur'
          }
        ],
        RepeatPwd: [
          {
            required: true,
            message: '重复密码不能为空！',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 30,
            message: '密码长度需在6-30位之间！',
            trigger: 'blur'
          },
          {
            validator: checkPwd,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.resetForm()
        }
      },
      immediate: true
    }
  },
  methods: {
    save() {
      this.$refs['empPwd'].validate((valid) => {
        if (valid) {
          this.set()
        } else {
          return false
        }
      })
    },
    refresVerCode() {
      if (this.isLoadCode === false) {
        this.isLoadCode = true
        this.verSrc = GetVerCodeSrc(this.loginName) + '&t=' + new Date().getTime()
      }
    },
    resetForm() {
      this.isLoadCode = false
      this.verSrc = GetVerCodeSrc(this.loginName)
      this.reset()
    },
    codeLoad() {
      this.isLoadCode = false
    },
    reset() {
      this.empPwd = {
        RepeatPwd: null,
        NewPwd: null,
        Password: null,
        LoginName: this.loginName
      }
    },
    closeForm() {
      this.$emit('update:visible', false)
    },
    async set() {
      await resetUserPwd({
        NewPwd: this.empPwd.NewPwd,
        Password: this.empPwd.Password,
        VerCode: this.empPwd.VerCode,
        LoginName: this.empPwd.LoginName
      })
      this.$message({
        message: '密码修改成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
    }
  }
}
</script>
